import React from 'react';
import { Radio } from 'antd';
import { FieldNodeSchema } from '@/app/codeTreeSlice';
import SizeComponent from '@/components/SizeComponent';
import FontChoose from '../fields/FontChoose';
import styles from '../index.less';

export default function UsageTrendsProd2(
  focusComponent: FieldNodeSchema | undefined,
  handleChange: (value: any, key: string) => void,
) {
  return (
    <div className={styles.styleBox}>
      <div style={{ marginBottom: '12px', fontWeight: 'bold' }}>Chart Theme</div>
      <Radio.Group
        value={focusComponent?.props.chartTheme || 'White'}
        onChange={(e) => handleChange(e.target.value, 'chartTheme')}
      >
        <Radio value="White">White</Radio>
        <Radio value="Black">Black</Radio>
      </Radio.Group>

      <div style={{ marginTop: '16px' }}>
        <FontChoose
          name="Selected Tab Color"
          currColor={focusComponent?.props.selectedTabColor}
          opacity={100}
          onChange={(value: string) => {
            handleChange(value, 'selectedTabColor');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>

      <div style={{ marginTop: '12px' }}>
        <FontChoose
          name="Chart Line Color"
          currColor={focusComponent?.props.chartLineColor}
          opacity={focusComponent?.props.chartLineColorOpacity || 100}
          onChange={(value: string, opacity: string) => {
            handleChange(value, 'chartLineColor');
            handleChange(opacity, 'chartLineColorOpacity');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>

      <div style={{ marginTop: '12px' }}>
        <FontChoose
          name="Chart Area Color"
          currColor={focusComponent?.props.chartAreaColor}
          opacity={focusComponent?.props.chartAreaColorOpacity || 10}
          onChange={(value: string, opacity: string) => {
            handleChange(value, 'chartAreaColor');
            handleChange(opacity, 'chartAreaColorOpacity');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>

      <div style={{ marginTop: '12px' }}>
        <FontChoose
          name="Tooltip Background Color"
          currColor={focusComponent?.props.tooltipBackgroundColor}
          opacity={focusComponent?.props.tooltipBackgroundColorOpacity || 80}
          onChange={(value: string, opacity: string) => {
            handleChange(value, 'tooltipBackgroundColor');
            handleChange(opacity, 'tooltipBackgroundColorOpacity');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>

      <div style={{ marginTop: '12px' }}>
        <FontChoose
          name="Tooltip Text Color"
          currColor={focusComponent?.props.tooltipTextColor}
          opacity={100}
          onChange={(value: string) => {
            handleChange(value, 'tooltipTextColor');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>

      <div style={{ marginTop: '12px' }}>
        <FontChoose
          name="Grid Line Color"
          currColor={focusComponent?.props.gridLineColor}
          opacity={focusComponent?.props.gridLineColorOpacity || 100}
          onChange={(value: string, opacity: string) => {
            handleChange(value, 'gridLineColor');
            handleChange(opacity, 'gridLineColorOpacity');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>

      <div style={{ marginTop: '12px' }}>
        <FontChoose
          name="Label Color"
          currColor={focusComponent?.props.labelColor}
          opacity={focusComponent?.props.labelColorOpacity || 100}
          onChange={(value: string, opacity: string) => {
            handleChange(value, 'labelColor');
            handleChange(opacity, 'labelColorOpacity');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>

      <div style={{ marginTop: '16px', marginBottom: '12px', fontWeight: 'bold' }}>Subtitle Style</div>
      <SizeComponent
        hasTitle
        title="Font Size"
        minNum={10}
        maxNum={30}
        currValue={focusComponent?.props.subtitleFontSize - 0 || 14}
        onNumChange={(value: any) => handleChange(`${value}`, 'subtitleFontSize')}
      />
      <div style={{ marginTop: '12px' }}>
        <FontChoose
          name="Subtitle Color"
          currColor={focusComponent?.props.subtitleColor}
          opacity={focusComponent?.props.subtitleColorOpacity || 100}
          onChange={(value: string, opacity: string) => {
            handleChange(value, 'subtitleColor');
            handleChange(opacity, 'subtitleColorOpacity');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>

      <div style={{ marginTop: '16px', marginBottom: '12px', fontWeight: 'bold' }}>Tab Style</div>
      <div style={{ marginTop: '12px' }}>
        <FontChoose
          name="Tab Border Color"
          currColor={focusComponent?.props.tabBorderColor}
          opacity={100}
          onChange={(value: string) => {
            handleChange(value, 'tabBorderColor');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>

      <div style={{ marginTop: '12px' }}>
        <FontChoose
          name="Tab Background Color"
          currColor={focusComponent?.props.tabBackgroundColor}
          opacity={100}
          onChange={(value: string) => {
            handleChange(value, 'tabBackgroundColor');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>

      <div style={{ marginTop: '12px' }}>
        <FontChoose
          name="Tab Text Color"
          currColor={focusComponent?.props.tabTextColor}
          opacity={100}
          onChange={(value: string) => {
            handleChange(value, 'tabTextColor');
          }}
          hasBold={false}
          hasItalic={false}
        />
      </div>
    </div>
  );
}
